<template>
  <div class="inspect-statistics">
    <van-cell
      :title="$route.query.date ? $route.query.date + '巡查统计' : '今日巡查统计'"
      size="large"
      :border="false"
    />
    <div class="inspect-statistics-content">
      <div v-for="(item, key) in inspectRecord" :key="key">
        <p v-if="item.startTimeFormat">
          <span class="inspect-statistics-label">开始时间：</span>
          <span class="inspect-statistics-value">{{ item.startTimeFormat }}</span>
        </p>
        <p v-if="item.endTimeFormat">
          <span class="inspect-statistics-label">结束时间：</span>
          <span class="inspect-statistics-value">{{ item.endTimeFormat }}</span>
        </p>
        <p class="inspect-statistics-extra" v-if="item.suspentCount > 0 && item.inspectionState === '3'">
          暂停{{ item.suspentCount }}次，暂停时间：{{ item.suspendDurationFormat }}
        </p>
      </div>

      <div class="inspect-statistics-end">
        <van-row>
          <van-col :span="13">
            <p>巡查时长：{{ durationFormat }}</p>
          </van-col>
          <!--          <van-col :span="11">-->
          <!--            <p>今日公里数：{{ kilometre }} 千米</p>-->
          <!--          </van-col>-->
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inspectRecord: [],
      duration: 0,
      durationFormat: '',
      kilometre: 0
    }
  },
  watch: {
    inspectRecord: {
      handler() {
        this.setStatistics()
      },
      deep: true
    }
  },
  methods: {
    // 统计时长、公里
    setStatistics() {
      this.duration = 0
      for (const item of this.inspectRecord) {
        this.duration += Number(item.duration)
      }
      this.setDuration()
    },
    // 时长
    setDuration() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      if (this.inspectRecord.length && this.inspectRecord[this.inspectRecord.length - 1].inspectionState === '1') {
        // 累加当前时间距离继续巡查/开始巡查时间
        const startTime =
          Number(this.inspectRecord[this.inspectRecord.length - 1].suspendEndTime) ||
          Number(this.inspectRecord[this.inspectRecord.length - 1].startTime)
        this.duration += new Date().getTime() - startTime
        this.duration = this.duration / 1000
        this.setDurationFormat()
        this.timer = setInterval(() => {
          this.duration += 1
          this.setDurationFormat()
        }, 1000)
      } else {
        this.duration = this.duration / 1000
        this.setDurationFormat()
      }
    },
    // 时长格式化
    setDurationFormat() {
      let second = 0
      let minute = 0
      let hour = 0
      hour = Math.floor(this.duration / 3600) % 24 // 转小时
      minute = Math.floor((this.duration / 60) % 60) // 转分钟
      second = Math.floor(this.duration % 60) // 转秒
      // 格式化
      hour = (hour > 9 ? hour : '0' + hour) + ''
      minute = (minute > 9 ? minute : '0' + minute) + ''
      second = (second > 9 ? second : '0' + second) + ''
      this.durationFormat = hour + ':' + minute + ':' + second
    }
    // 公里
  }
}
</script>
<style scope lang="less">
.inspect-statistics {
  background-color: #ffffff;
  &-content {
    padding: 0 32px 16px;
    line-height: 44px;
  }
  &-label {
    color: @blue;
  }
  &-extra {
    color: @orange;
    font-size: 20px;
    line-height: 48px;
  }
  &-end {
    font-size: 28px;
    font-weight: 500;
    line-height: 64px;
  }
}
</style>
